<template>
  <div class="index-news-box clearfix serveMain">
	<swiperService></swiperService>
    <div class="box clearfix">
		<div class="location">
		  <router-link to="/serve">{{$t('common.personService.rencai')}}</router-link>
			<span>></span>
			<span>{{curTit}}</span>
		</div>
		<div class="mainLR clearfix">
			<mainLes :leftData = 'leftData' @leftChange="leftChange" />
			<div class="main-right">
				<div class="news-ri-tit flex-lect">{{leftData.nav[type].name}}</div>
				<div class="serveMain-list">
					
					<!-- 服务专题 -->
					<div class="news-list" v-if="type==0">
						<router-link :to="'/serve_Detail?id='+item.id" class="news-item flex-bect" v-for="(item, index) in list1" :key="index">
						  <h2 class="font14 ntit">{{item.itemName}}</h2>
						  <span class="tr">{{item.createTime.substr(0,10)}}</span>
						</router-link>
					</div>
					<!-- 行业精英 -->
					<div class="news-list" v-if="type==1">
						<router-link :to="'/serve_Detail_elite?id='+item.id" class="news-item flex-bect" v-for="(item, index) in list2" :key="index">
						  <h2 class="font14 ">
								<span class="ntit">{{item.informationTitle}}</span>
								<span class="newTag rd15" v-if="item.tag == 1 || item.tag == 2">
									<template v-if="item.tag == 1">New</template>
									<template v-if="item.tag == 2">Hot</template>
								</span>
							</h2>
						  <span class="tr">{{item.updateTime.substr(0,10)}}</span>
						</router-link>
					</div>

					<!-- 名师讲堂 -->
					<div class="news-list" v-if="type==2">
						<router-link :to="'/serve_sign?id='+item.id" target="_blank" class="news-item flex-bect" v-for="(item, index) in list3" :key="index">
						  <h2 class="font14 ntit">{{item.courseName}}（讲师：{{item.instructorResource.userName}}） {{item.beginTime}}开课</h2>
						  <span class="status" :class="[item.courseStatus == 0 ? 'red1': item.courseStatus == 1 ? 'red0' : 'h99'] ">{{item.courseStatusTxt}}</span>
						  <span class="tr">{{item.updateTime.substr(0,10)}}</span>
						</router-link>
					</div>

				</div>
				<el-pagination class="tc"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page.sync="pageNo"
					:page-size="pageSize"
					layout="prev, pager, next, jumper"
					:total="total">
				</el-pagination>
			</div>
		</div>
    </div>
  </div>
</template>
<script>
import {ajax,reg,ajaxAdd,showToast} from '@/utils/js.js'
import {getNews,activityApply,training,serviceItems,elite} from '@/services/api.js'
import mainLes from '@/components/mainLe.vue'
import swiperService from '@/components/personService.vue' //人才服务轮播图
const log = console.log
export default {
	components:{
		mainLes,
		swiperService
	},
	data() {
		return {
			imgUrl:this.$store.state.imgUrl,	//图片前缀
			list1:[], 	//人才专题
			list2:[],	//行业精英
			list3:[],	//名师讲堂
			type:0,		//左侧导航切换
			pageNo:1,
			pageSize:10,  
			total:0,
			curTit:''
		}
	},
	mounted(){
		let type = this.$route.query.type
		log('type',type)
		this.leftData.type = type
		this.type = type
		this.content(type);
		this.curTit = this.leftData.nav[type].name
	},
	computed:{
		leftData(){
		  var data={
				type:0,
				tit:this.$t('common.personService.rencai'),
				nav:[
					{name:this.$t('common.personService.topics'),id:0},
					{name:this.$t('common.personService.elite'),id:1},
					{name:this.$t('common.personService.teacher'),id:2}
				]
		  }
		  return data
		},
	},
  methods:{
    leftChange(e){
      this.type = e.id
      this.pageNo = 1;
			this.content(e.id);
			this.curTit = e.name
      log('this.type',this.type)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
	// 切换页时触发
    handleCurrentChange(val) {
      console.log('当前页',val);
	  this.pageNo = val
	  setTimeout(()=>{
		this.content();
	  },100)
    },
    changeList(){
      this.content()
    },
	// 获取服务专题列表
	getService(data){
		// 人才服务专题
		ajax(this,serviceItems,{serviceType:3},res=>{
			console.log(res.data)
			this.list1 =res.data
		},err=>{
			console.log(err)
		})
	},
	// 获取行业精英列表
	getElite(data){
		ajax(this,elite,{pageNo:1,pageSize:10},res=>{
			this.list2 = res.data.records
		},err=>{console.log(err)})
	},
	// 获取名师讲堂列表
	getTeacher(data){
		ajax(this,training,data,res=>{
			this.list3 = res.data.records;
		},err=>{
		  showToast(this,err.msg)
		})
	},
    content(type = this.type){
      let data={
        pageNo:this.pageNo,
        pageSize:this.pageSize
      }
	  if(this.type==0){
		this.getService()
	  }
	  if(this.type==1){
		this.getElite()
	  }
	  if(this.type==2){
	  	this.getTeacher(data)
	  }
      
    },
    
  },
  watch:{
    '$i18n.locale'(){
      this.content()
    },
  },
}
</script>
<style lang="scss">

.index-news-box{width:100%;background-color: #fff;}
.mainLR{padding-top:0;}
.serveMain{
	.location{line-height:45px;}
	.banner{
	  img{display: block;}
	  .el-carousel--button{
	    width:12px;
	    height:12px;
	    background:rgba(255,255,255,1);
	    border-radius:50%;
	    opacity: 1;
	  }
	  .el-carousel--indicator.is-active button{
	    background-color: #0F54BC;
	  }
	}
	.banner .link{height: 450px;display: block;width: 100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
	.bannerdot {width: 100%;bottom:10px;left: 0;z-index: 999;}
	.bannerdot .swiper-pagination-bullet{width:12px;height:12px;background-color: #fff;opacity: 1;margin:0 8px;}
	.bannerdot .swiper-pagination-bullet-active{background-color: #0F54BC;}
	.main-right .news-item::before{
		color: #CDCDCD;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.main-right .news-item{
		.newTag{position: relative;top:-10px;font-size:12px;font-weight: normal;color: #fff !important;background-color: red;padding:2px 5px;margin-left:5px;line-height:1 !important;}
		// padding-left: 25px;
		position: relative;
	}
	.main-right{
		.ntit{
			flex: 0.7;
			margin-left: 0;
		}
	}
	.status{
		flex: 0.2;
	}
	
}
</style>